<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            left: 0px;
            top: 0px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
    <script>
        // 方块从左至右移动  ： 不停的更改 left的值 ；

        // 一、方块的运动 
        // var boxEle = document.querySelector(".box");

        // var timer = setInterval(function () {
        //     // 获取当前box的left值
        //     var num = parseInt(getComputedStyle(boxEle)['left']);
        //     num += 5;
        //     boxEle.style.left = num + "px";
        //     // 假定 运动 500的时候开始向下移动；
        //     if (num == 500) {
        //         clearInterval(timer);
        //         var timer2 = setInterval(function () {
        //             // 获取当前box的left值
        //             var num2 = parseInt(getComputedStyle(boxEle)['top']);
        //             num2 += 5;
        //             boxEle.style.top = num2 + "px";
        //             // 假定 运动 500的时候开始向下移动；
        //             if (num2 == 500) {
        //                 clearInterval(timer2);
        //                 console.log("停止了");

        //                 var timer3 = setInterval(function () {
        //                     // 获取当前box的left值
        //                     var num3 = parseInt(getComputedStyle(boxEle)['left']);
        //                     num3 -= 5;
        //                     boxEle.style.left = num3 + "px";
        //                     // 假定 运动 500的时候开始向下移动；
        //                     if (num3 == 0) {
        //                         clearInterval(timer3);
        //                         console.log("停止了");
        //                     }
        //                 }, 50);
        //             }
        //         }, 50);
        //     }

        // }, 50);



        // 二、方块的运动函数；
        // 把不变的逻辑封装 ，需要变动的位置 抽离成变量；
        function move(boxEle,dir,target,cb) {
            console.log(cb);
            var timer = setInterval(function () {
                // 获取当前box的left值
                var num3 = parseInt(getComputedStyle(boxEle)[dir]);
                // 当前方块所在的位置 和 目标位置比较
                num3 += 5*(target>num3?1:-1);
                boxEle.style[dir] = num3 + "px";
                // 假定 运动 500的时候开始向下移动；
                if (num3 == target) {
                    clearInterval(timer);
                    console.log("停止了");
                    cb();
                }
            }, 10);
        }


        var boxEle = document.querySelector(".box");

        // 同时执行 ； 什么时候 运动结束了；
        // 可以通过回调函数实现 停止之后再执行逻辑 
        // 回调函数 callback： 
        move(boxEle,"left",500,function(){
            console.log("执行了");
            move(boxEle,"top",500,function(){
                console.log("第二次执行完毕");
                move(boxEle,"left",0,function(){
                    console.log("第三次执行完毕");
                    move(boxEle,"top",0,function(){
                        console.log("所有都执行完毕");
                    })
                })
            });
        });
        // move(boxEle,"top",500);








    </script>
</body>

</html>